<template>
  <PageContainer :title="false" :content="$t('form.basic-form.basic.description')">
    <a-card :body-style="{padding:'24px 32px'}" :bordered="false">
      <!--            @submit="handleSubmit"-->
      <a-form ref="form" :model="formState">
        <a-form-item
          name="name"
          :label="$t('form.basic-form.title.label')"
          :label-col="{lg: {span: 7}, sm: {span: 7}}"
          :wrapper-col="{lg: {span: 10}, sm: {span: 17} }"
          :rules="[{ required: true, message: $t('form.basic-form.title.required') ,trigger: 'blur,change'}]"
        >
          <a-input
            v-model:value="formState.name"
            :placeholder="$t('form.basic-form.title.placeholder')"
          />
        </a-form-item>
        <a-form-item
          name="buildTime"
          :label="$t('form.basic-form.date.label')"
          :label-col="{lg: {span: 7}, sm: {span: 7}}"
          :wrapper-col="{lg: {span: 10}, sm: {span: 17} }"
          :rules=" [{ required: true,type:'array', message: $t('form.basic-form.date.required') }]"
        >
          <a-range-picker
            v-model:value="formState.buildTime"

            style="width: 100%"
          />
        </a-form-item>
        <a-form-item
          :label="$t('form.basic-form.goal.label')"
          :label-col="{lg: {span: 7}, sm: {span: 7}}"
          :wrapper-col="{lg: {span: 10}, sm: {span: 17} }"
          name="description"
          :rules="[{ required: true, message: $t('form.basic-form.goal.required') }]"
        >
          <a-textarea
            v-model:value="formState.description"
            rows="4"
            :placeholder="$t('form.basic-form.goal.placeholder')"
          />
        </a-form-item>
        <a-form-item
          :label="$t('form.basic-form.standard.label')"
          :label-col="{lg: {span: 7}, sm: {span: 7}}"
          :wrapper-col="{lg: {span: 10}, sm: {span: 17} }"
          :rules="[{ required: true, message: $t('form.basic-form.standard.required') }]"
          name="standard"
        >
          <a-textarea
            v-model:value="formState.standard"
            rows="4"
            :placeholder="$t('form.basic-form.standard.placeholder')"
          />
        </a-form-item>
        <a-form-item
          :label="$t('form.basic-form.client.label')"
          :label-col="{lg: {span: 7}, sm: {span: 7}}"
          :wrapper-col="{lg: {span: 10}, sm: {span: 17} }"
          name="customer"
          :rules="[{ required: true, message: $t('form.basic-form.client.required') }]"
        >
          <a-input
            v-model:value="formState.customer"
            :placeholder="$t('form.basic-form.client.placeholder')"
          />
        </a-form-item>
        <a-form-item
          :label="$t('form.basic-form.invites.label')"
          :label-col="{lg: {span: 7}, sm: {span: 7}}"
          :wrapper-col="{lg: {span: 10}, sm: {span: 17} }"
          :required="false"
          name="invites"
        >
          <a-input
            v-model:value="formState.invites"
            :placeholder="$t('form.basic-form.invites.placeholder')"
          />
        </a-form-item>
        <a-form-item
          :label="$t('form.basic-form.weight.label')"
          :label-col="{lg: {span: 7}, sm: {span: 7}}"
          :wrapper-col="{lg: {span: 10}, sm: {span: 17} }"
          :required="false"
        >
          <a-input-number v-model:value="formState.weight" :min="0" :max="100" />
          <span> %</span>
        </a-form-item>

        <a-form-item
          :label="$t('form.basic-form.public.label')"
          :label-col="{lg: {span: 7}, sm: {span: 7}}"
          :wrapper-col="{lg: {span: 10}, sm: {span: 17} }"
          :required="false"
        >
          <a-radio-group v-model:value="formState.target" :default-value="1">
            <a-radio :value="1">
              {{ $t('form.basic-form.radio.public') }}
            </a-radio>
            <a-radio :value="2">
              {{ $t('form.basic-form.radio.partially-public') }}
            </a-radio>
            <a-radio :value="3">
              {{ $t('form.basic-form.radio.private') }}
            </a-radio>
          </a-radio-group>
          <a-form-item v-show="formState.target === 2">
            <a-select mode="multiple">
              <a-select-option value="4">
                {{ $t('form.basic-form.option.A') }}
              </a-select-option>
              <a-select-option value="5">
                {{ $t('form.basic-form.option.B') }}
              </a-select-option>
              <a-select-option value="6">
                {{ $t('form.basic-form.option.C') }}
              </a-select-option>
            </a-select>
            <span>{{ $t('form.basic-form.label.help') }}</span>
          </a-form-item>
        </a-form-item>

        <a-form-item
          :wrapper-col="{ span: 24 }"
          style="text-align: center"
        >
          <a-button type="primary" @click="handleSubmit">
            {{ $t('form.basic-form.form.submit') }}
          </a-button>
          <a-button style="margin-left: 8px">
            {{ $t('form.basic-form.form.save') }}
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </PageContainer>
</template>

<script>
    import { defineComponent, reactive, ref, toRaw } from 'vue'
    import { PageContainer } from '@ant-design-vue/pro-layout'
    import { i18nRender } from '@/locales'

    export default defineComponent({
        name: 'BasicForm',
        components: { PageContainer },
        setup() {
            const form = ref()
            const formState = reactive({
                name: '', target: 1
            })
            const rules = {
                name: [
                    { required: true, message: i18nRender('form.basic-form.title.required'), trigger: 'blur,change' }
                ]
            }
            const handleSubmit = () => {
                form.value.validate()
                    .then((v) => {
                        console.log(toRaw(v))
                        const values = toRaw(formState)
                        console.log(values)
                    })
                    .catch(err => {
                        console.log('error', err)
                    })
            }
            return { form, formState, rules, handleSubmit }
        }
    })
</script>

<style scoped>

</style>
